<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="${request.Context}/css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${request.Context}/js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="${request.Context}/css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</head>
<body>
<!-- Header Starts Here -->
<div class="header">
	<div class="container">
		<div class="header-top">
			<div class="logo">
				<a href="${index.html}"><img src="${request.Context}/images/logo.png"></a>
			</div>
			<span class="menu"></span>
			<div class="clear"></div>
			<div class="navigation">
				<ul class="navig">
					<li><a href="${bikes.html}">Bikes</a></li>
					<li><a href="${best.html}">Best Buy</a></li>
					<li><a href="${bikes.html}">Offers</a></li>
					<li><a href="${best.html}">Accessories</a></li>
					<li><a href="${contact.html}">Contact</a></li>
					<li><a href="${about.html}">About Us</a></li>
				</ul>
				<script>
					$( "span.menu" ).click(function() {
					  $( ".navigation ul.navig" ).slideToggle( "slow", function() {
					    // Animation complete.
					  });
					});
				</script>

			</div>
			<div class="clearfix"></div>
		</div>
		<!-- Banner Slide Starts Here -->
			<div class="slider">
			<!-- Slideshow 3 -->
			<script src="${request.Context}/js/responsiveslides.min.js"></script>
			<script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 3
			      $("#slider3").responsiveSlides({
			        manualControls: '#slider3-pager',
			      });
			    });
			  </script>
		    <ul class="rslides" id="slider3">
		    <li>
		    	<div class="banner">
					<h1>What a beautiful bike</h1>
					<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
				</div>
		   	</li>
		   	<li>
		    	<div class="banner banner2">
					<h1>What a beautiful bike</h1>
					<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
				</div>
		   	</li>
		   	<li>
		    	<div class="banner banner1">
					<h1>What a beautiful bike</h1>
					<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
				</div>
		   	</li>
		   	</ul>
		   	<ul id="slider3-pager">
		      <li><a href="#"><img src="${request.Context}/images/device3.jpg" alt=""></a></li>
		      <li><a href="#"><img src="${request.Context}/images/device2.jpg" alt=""></a></li>
		      <li><a href="#"><img src="${request.Context}/images/device1.jpg" alt=""></a></li>
		    </ul>
		    <div class="clearfix"> </div>
		    </div>
		<!-- Banner Slide Ends Here -->
		<!-- Best Seller Starts Here -->
		<div class="best-seller">
			<div class="best-seller-row">
				<div class="seller-column">
					<div class="sale-box">
						<span class="on_sale title_shop">bestseller</span>
					</div>
					<img src="${request.Context}/images/biscyle1.jpg" alt=""  class="seller-img">
				</div>
				<div class="seller-column1">
					<h3>Sale</h3>
					<span class="sale-nip"></span>
					<h4>Bicycle RetroSyperb Vii #1</h4>
					<small>by Rodriguez Else</small>
					<p>299.99$</p>
					<div class="price">
						<a href="${single.html}">Add to Shopping bag</a>
						<span class="rating">Rating: 5.0 <i class="ratings"></i></span>
					</div>
					<p class="customer">Ask the Customer a Question</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="biseller-info">
			<ul id="flexiselDemo3">
				<li>
					<div class="biseller-column">
					<img src="${request.Context}/images/sm1.jpg" alt="" class="veiw-img">
						<div class="veiw-img-mark">
							<a href="${single.html}">Add to Cart</a>
						</div>
					<div class="biseller-name">
						<h4>Sport Bicycle 988</h4>
						<small>by Enrique Salmo</small>
					</div>
					<div class="biseller-name1">
						<p>139.99$</p>
					</div>
					<div class="clearfix"></div>
					<div class="price-s">
						<a href="${single.html}">Add to Shopping bag</a>
					</div>
					
					</div>
				</li>
				<li>
					<div class="biseller-column">
					<img src="${request.Context}/images/sm3.jpg" alt="" class="veiw-img">
						<div class="veiw-img-mark">
							<a href="${single.html}">Add to Cart</a>
						</div>
					<div class="biseller-name">
						<h4>Classic Bicycle </h4>
						<small>by Ankino Frique</small>
					</div>
					<div class="biseller-name1">
						<p>1 219.99$</p>
					</div>
					<div class="clearfix"></div>
					<div class="price-s">
						<a href="${single.html}">Add to Shopping bag</a>
					</div>
					
					</div>
				</li>
				<li>
					<div class="biseller-column">
					<img src="${request.Context}/images/sm4.jpg" alt="" class="veiw-img">
						<div class="veiw-img-mark">
							<a href="${single.html}">Add to Cart</a>
						</div>
					<div class="biseller-name">
						<h4>Retro Bicycle #2</h4>
						<small>by Enrique Salmo</small>
					</div>
					<div class="biseller-name1">
						<p>899.99$</p>
					</div>
					<div class="clearfix"></div>
					<div class="price-s">
						<a href="${single.html}">Add to Shopping bag</a>
					</div>
					
					</div>
				</li>
				<li>
					<div class="biseller-column">
					<img src="${request.Context}/images/biscyle1.jpg" alt="" class="veiw-img">
						<div class="veiw-img-mark">
							<a href="${single.html}">Add to Cart</a>
						</div>
					<div class="biseller-name">
						<h4>Classic Bicycle </h4>
						<small>by Marco Spielmann</small>
					</div>
					<div class="biseller-name1">
						<p>1 219.99$</p>
					</div>
					<div class="clearfix"></div>
					<div class="price-s">
						<a href="${single.html}">Add to Shopping bag</a>
					</div>
					
					</div>
				</li>
	     	</ul>
			</div>
			<div class="tlinks">Collect from <a href="${www.cssmoban.com}" >网页模板</a></div>
		</div>
			<script type="text/javascript">
				 $(window).load(function() {
					$("#flexiselDemo3").flexisel({
						visibleItems: 3,
						animationSpeed: 1000,
						autoPlay: true,
						autoPlaySpeed: 3000,    		
						pauseOnHover: true,
						enableResponsiveBreakpoints: true,
				    	responsiveBreakpoints: { 
				    		portrait: { 
				    			changePoint:480,
				    			visibleItems: 1
				    		}, 
				    		landscape: { 
				    			changePoint:640,
				    			visibleItems: 2
				    		},
				    		tablet: { 
				    			changePoint:768,
				    			visibleItems: 3
				    		}
				    	}
				    });
				    
				});
			   </script>
			   <script type="text/javascript" src="${request.Context}/js/jquery.flexisel.js"></script>
	</div>
</div>
	<!--- fOOTER Starts Here --->
	<div class="container">
		<div class="footer">
			<a href="">Browse shop</a>
		</div>
		<div class="footer-top">
			<ul class="bottom-list">
				<li><a href="#">terms & conditions</a></li>
				<li><a href="#">return policy</a></li>
				<li><a href="#">reviews</a></li>
				<li><a href="#">about shop</a></li>
				<li><a href="#">secure payment</a></li>
			</ul>
		</div>
		<ul class="payment-list">
			<li><i class="paypal"></i></li>
			<li><i class="wi"></i></li>
			<li><i class="visa"></i></li>
			<li><i class="amazon"></i></li>
			<li><i class="sm"></i></li>
		</ul>
		<p class="copyright">Copyright &copy; 2014.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	</div>
	<!--- fOOTER Starts Here --->

</body>
</html>

